<script setup lang="ts">

const colorData = {
  '子水': '#5461ff',
  '丑土': '#98380f',
  '寅木': '#25ff29',
  '卯木': '#25ff29',
  '辰土': '#98380f',
  '巳火': '#f80000',
  '午火': '#f80000',
  '未土': '#98380f',
  '申金': '#ffcf02',
  '酉金': '#ffcf02',
  '戌土': '#98380f',
  '亥水': '#5461ff',
  '辅木': '#25ff29',
  '英火': '#f80000',
  '芮土': '#98380f',
  '柱金': '#ffcf02',
  '蓬水': '#5461ff',
  '任空': '#000000',
  '青龙': '#25ff29',
  '朱雀': '#f80000',
  '玄武': '#5461ff',
  '白虎': '#ffcf02',
  '腾蛇': '#98380f',
  '勾陈': '#98380f',
}

const data = defineProps({
  resultData: {
    type: Object,
  }
})

</script>

<template>
  <el-col v-if="data.resultData.length > 0" :xs="{span:24}" :md="{span:12,offset:6}">
    <div style="margin-top: 20px;padding: 20px;">
      <div class="result-div">
        <div>
          <div v-for="item in data.resultData">
            <div class="result-sub-div" v-if="item.gongWeiKey === '2'">
              <div class="liuSheng">
                <div :style="{color: colorData[item.huoLiuSheng1]}">{{ item.huoLiuSheng1 }}</div>
                <div :style="{color: colorData[item.liuSheng]}">{{ item.liuSheng }}</div>
              </div>
              <div class="liuQin" :style="{color: colorData[item.liuQin]}">
                {{ item.liuQin }}
              </div>
              <div class="wuXing" :style="{color: colorData[item.wuXing]}">
                {{ item.wuXing }}
              </div>
              <div class="diZhi" :style="{color: colorData[item.diZhi]}">
                {{ item.diZhi }}
              </div>
              <div class="luoGong">
                <label v-if="item.month==='留连'">月</label>
                <label v-if="item.day==='留连'">日</label>
                <label v-if="item.time==='留连'">时</label>
              </div>
            </div>
          </div>
          <label class="gongWeiLabel" style="background: #98380f">留连</label>
        </div>
        <div>
          <div v-for="item in resultData">
            <div class="result-sub-div" v-if="item.gongWeiKey === '3'">
              <div class="liuSheng">
                <div :style="{color: colorData[item.huoLiuSheng1]}">{{ item.huoLiuSheng1 }}</div>
                <div :style="{color: colorData[item.liuSheng]}">{{ item.liuSheng }}</div>
              </div>
              <div class="liuQin" :style="{color: colorData[item.liuQin]}">
                {{ item.liuQin }}
              </div>
              <div class="wuXing" :style="{color: colorData[item.wuXing]}">
                {{ item.wuXing }}
              </div>
              <div class="diZhi" :style="{color: colorData[item.diZhi]}">
                {{ item.diZhi }}
              </div>
              <div class="luoGong">
                <label v-if="item.month==='速喜'">月</label>
                <label v-if="item.day==='速喜'">日</label>
                <label v-if="item.time==='速喜'">时</label>
              </div>
            </div>
          </div>
          <label class="gongWeiLabel" style="background: #f80000">速喜</label>
        </div>
        <div>
          <div v-for="item in resultData">
            <div class="result-sub-div" v-if="item.gongWeiKey === '4'">
              <div class="liuSheng">
                <div :style="{color: colorData[item.huoLiuSheng1]}">{{ item.huoLiuSheng1 }}</div>
                <div :style="{color: colorData[item.liuSheng]}">{{ item.liuSheng }}</div>
              </div>
              <div class="liuQin" :style="{color: colorData[item.liuQin]}">
                {{ item.liuQin }}
              </div>
              <div class="wuXing" :style="{color: colorData[item.wuXing]}">
                {{ item.wuXing }}
              </div>
              <div class="diZhi" :style="{color: colorData[item.diZhi]}">
                {{ item.diZhi }}
              </div>
              <div class="luoGong">
                <label v-if="item.month==='赤口'">月</label>
                <label v-if="item.day==='赤口'">日</label>
                <label v-if="item.time==='赤口'">时</label>
              </div>
            </div>
          </div>
          <label class="gongWeiLabel" style="background: #ffcf02">赤口</label>
        </div>
        <div>
          <div v-for="item in resultData">
            <div class="result-sub-div" v-if="item.gongWeiKey === '1'">
              <div class="liuSheng">
                <div :style="{color: colorData[item.huoLiuSheng1]}">{{ item.huoLiuSheng1 }}</div>
                <div :style="{color: colorData[item.liuSheng]}">{{ item.liuSheng }}</div>
              </div>
              <div class="liuQin" :style="{color: colorData[item.liuQin]}">
                {{ item.liuQin }}
              </div>
              <div class="wuXing" :style="{color: colorData[item.wuXing]}">
                {{ item.wuXing }}
              </div>
              <div class="diZhi" :style="{color: colorData[item.diZhi]}">
                {{ item.diZhi }}
              </div>
              <div class="luoGong">
                <label v-if="item.month==='大安'">月</label>
                <label v-if="item.day==='大安'">日</label>
                <label v-if="item.time==='大安'">时</label>
              </div>
            </div>
          </div>
          <label class="gongWeiLabel" style="background: #25ff29">大安</label>
        </div>
        <div>
          <div v-for="item in resultData">
            <div class="result-sub-div" v-if="item.gongWeiKey === '6'">
              <div class="liuSheng">
                <div :style="{color: colorData[item.huoLiuSheng1]}">{{ item.huoLiuSheng1 }}</div>
                <div :style="{color: colorData[item.liuSheng]}">{{ item.liuSheng }}</div>
              </div>
              <div class="liuQin" :style="{color: colorData[item.liuQin]}">
                {{ item.liuQin }}
              </div>
              <div class="wuXing" :style="{color: colorData[item.wuXing]}">
                {{ item.wuXing }}
              </div>
              <div class="diZhi" :style="{color: colorData[item.diZhi]}">
                {{ item.diZhi }}
              </div>
              <div class="luoGong">
                <label v-if="item.month==='空亡'">月</label>
                <label v-if="item.day==='空亡'">日</label>
                <label v-if="item.time==='空亡'">时</label>
              </div>
            </div>
          </div>
          <label class="gongWeiLabel" style="background: #98380f">空亡</label>
        </div>
        <div>
          <div v-for="item in resultData">
            <div class="result-sub-div" v-if="item.gongWeiKey === '5'">
              <div class="liuSheng">
                <div :style="{color: colorData[item.huoLiuSheng1]}">{{ item.huoLiuSheng1 }}</div>
                <div :style="{color: colorData[item.liuSheng]}">{{ item.liuSheng }}</div>
              </div>
              <div class="liuQin" :style="{color: colorData[item.liuQin]}">
                {{ item.liuQin }}
              </div>
              <div class="wuXing" :style="{color: colorData[item.wuXing]}">
                {{ item.wuXing }}
              </div>
              <div class="diZhi" :style="{color: colorData[item.diZhi]}">
                {{ item.diZhi }}
              </div>
              <div class="luoGong">
                <label v-if="item.month==='小吉'">月</label>
                <label v-if="item.day==='小吉'">日</label>
                <label v-if="item.time==='小吉'">时</label>
              </div>
            </div>
          </div>
          <label class="gongWeiLabel" style="background: #5461ff">小吉</label>
        </div>
      </div>
      <div class="sanCai">
        三才：{{ resultData[0].sanCai }}
      </div>
    </div>
  </el-col>
</template>

<style scoped>
.result-div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.result-div > div {
  flex: 0 0 calc(33.33% - 2px);
  border: 1px solid #000000;
}

.result-sub-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.result-sub-div > div {
  display: flex;
  flex: 0 0 33.33%;
  padding: 8% 0;
}

.gongWeiLabel {
  font-size: large;
  display: flex;
  justify-content: center;
}

.diZhi {
  flex-direction: column;
  justify-content: left;
  align-items: center;
}

.liuQin {
  justify-content: flex-end;
  align-items: flex-end;
}

.liuSheng {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wuXing {
  justify-content: center;
  align-items: flex-start;
}

.luoGong {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sanCai {
  font-size: large;
  margin-top: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>
